<template>
  <div class="SignFlowHomepage">
    <div class="SignFlowHomepage-content">
      <img
        alt="X站 LOGO"
        class="SignFlowHomepage-logo animate__animated animate__bounceIn"
        src="@/assets/loginlogo.png"
      />
      <div class="css-zvnmar animate__animated animate__shakeY">
        <div class="SignFlow-tabs">
          <div>嘻哩嘻哩管理系统</div>
        </div>
        <!-- 密码登录 -->
        <a-form :form="form" @submit="loginSubmit">
          <a-form-item :label-col="{ span: 3 }">
            <a-input
              placeholder="手机号（中国大陆）"
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      required: true,
                      pattern: new RegExp(
                        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[35678]|18[0-9]|14[57])[0-9]{8}$/
                      ),
                      message: '请输入正确的手机号',
                    },
                  ],
                },
              ]"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input-password
              placeholder="登录密码"
              v-decorator="[
                'password',
                {
                  rules: [
                    {
                      required: true,
                      pattern: new RegExp(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/),
                      message: '密码由6-16个英文和数字组成',
                    },
                  ],
                },
              ]"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input-password>
          </a-form-item>
          <a-form-item style="margin-bottom: 0">
            <img src="@/assets/gzh.png" alt width="100%" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { requset } from "@/api";
import { encryptByDES } from "@/utils/idnumberDes";

export default {
  name: "login",
  components: {},
  data() {
    return {
      form: this.$form.createForm(this),
      tabList: ["密码登录"],
    };
  },
  mounted() {},
  methods: {
    // 登录
    loginSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          let params = {
            phone: this.form.getFieldValue("phone"),
            passWord: encryptByDES(
              this.form.getFieldValue("password"),
              "xilixili_adminlogin_jiangzichen_passWord_sfewt23r%dsfs"
            ),
          };
          requset("post", "/users/admin/login", params).then((res) => {
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
              this.$router.push("/");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },

    validatephone(rule, value, callback) {
      var reg = new RegExp(
        /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[35678]|18[0-9]|14[57])[0-9]{8}$/
      );
      if (value == "" || value == undefined || value == null) {
        callback("登录账号不能为空");
      } else {
        callback("");
      }
    },
  },
};
</script>

<style scoped>
.SignFlowHomepage {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-image: url(https://static.zhihu.com/heifetz/assets/sign_bg.db29b0fb.png);
  background-repeat: no-repeat;
  background-color: #b8e5f8;
  background-size: cover;
  width: 100%;
  height: 100vh;
  overflow: auto;
}
.SignFlowHomepage-content {
  flex: 1 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  min-height: 688px;
  height: calc(100% - 42px);
  box-sizing: border-box;
}
.SignFlowHomepage-logo {
  width: 200px;
  height: 95px;
  margin-bottom: 24px;
}
.css-zvnmar {
  box-sizing: border-box;
  margin: 0;
  min-width: 0;
  padding: 0;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgb(18 18 18 / 10%);
  border-radius: 2px;
  background-color: #ffffff;
  width: 400px;
  height: 430px;
  overflow: hidden;
  padding: 0 24px 0;
}
.SignFlow-tabs {
  width: 100%;
  display: flex;
  justify-content: center;
  font-weight: 800;
}
.SignFlow-tabs > div {
  font-size: 25px;
  line-height: 60px;
  height: 60px;
  cursor: pointer;
}
.SignFlow-tabs :nth-child(1) {
  margin-right: 20px;
}
.SignFlow-tab {
  font-weight: 800;
  border-bottom: 3px solid #1890ff;
}
.ant-form {
  margin-top: 15px !important;
}
.ant-row {
  margin-top: -5px;
}
.ant-btn-primary {
  width: 100% !important;
  height: 40px;
}
.agreement {
  display: inline;
  margin-left: 15px;
}
.agreement span {
  color: #1890ff;
  cursor: pointer;
}
::v-deep .ant-modal-body {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
